<template>
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    title="选择年月日"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</template>

<script>
import { editUserProfileAPI } from '@/api'
import dayjs from 'dayjs'
export default {
  // value属性和input事件的语法糖
  // v-model只能在组件上使用一次
  // 修改value和input的名字
  // 修改子组件 model:{prop:'属性名'，event:'事件名'}
  model: {
    prop: 'birthday',
    event: 'update:birthday'
  },
  props: {
    birthday: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(this.birthday)
    }
  },
  methods: {
    async onConfirm() {
      this.$toast.loading({
        message: '更新生日中...',
        forbidClick: true
      })
      try {
        // dayjs
        const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
        await editUserProfileAPI({
          birthday
        })
        this.$emit('update:birthday', birthday)
        // this.$emit('update:birthday', birthday)
        this.$emit('close')
        this.$toast.success('更新成功')
      } catch (error) {
        this.$toast.fail('更新失败')
      }
    },
    onCancel() {
      this.$emit('close')
    }
  }
}
</script>

<style></style>
